<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    #carousel {
      margin: 200px auto;
      width: 750px;
      height: 291px;
      position: relative;
    }

    .img-box img {
      display: none;
    }

    .img-box img.active {
      display: inline-block
    }

    #carousel ul {
      display: flex;
      position: absolute;
      right: 30px;
      bottom: 30px;

    }

    #carousel li {
      width: 50px;
      height: 50px;
      background: rgba(0, 0, 0, 0.456);
      color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      margin-right: 5px;
      cursor: pointer;
    }

    #carousel li.active {
      background: rgba(153, 10, 10, 0.759);
    }

    .btn {
      width: 80px;
      height: 80px;
      font-size: 50px;
      text-align: center;
      line-height: 80px;
      background: rgba(0, 0, 0, 0.456);
      color: #fff;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }
  </style>
</head>

<body>

  <div id="carousel">
    <div class="img-box">
      <img src="imgs/1.jpg" alt="" class="active" />
      <img src="imgs/2.jpg" alt="">
      <img src="imgs/3.jpg" alt="">
      <img src="imgs/4.jpg" alt="">
      <img src="imgs/5.jpg" alt="">
    </div>
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <div class="btn prev">&lt;</div>
    <div class="btn next">&gt;</div>
  </div>

  <script>
    const aLi = document.querySelectorAll('#carousel li')
    const aImg = document.querySelectorAll('#carousel img')




    let current = 0// 当前显示的索引

    // 切换图片的具体逻辑
    function change() {
      for (let i = 0; i < aLi.length; i++) {
        aLi[i].className = ''
        aImg[i].className = ''
      }
      aLi[current].className = 'active'
      aImg[current].className = 'active'
    }

    // 点击数字切换
    for (let i = 0; i < aLi.length; i++) {
      aLi[i].onclick = function () {
        current = i
        change()
      }
    }

    // 手动翻页
    const oNext = document.querySelector('.next')
    oNext.onclick = function () {
      current++
      if (current == aLi.length) current = 0
      change()
    }

    const oPrev = document.querySelector('.prev')
    oPrev.onclick = function () {
      current--
      if (current < 0) current = aLi.length - 1
      change()
    }

    // 自动翻页
    const oContainer = document.querySelector('#carousel')
    let timer
    oContainer.onmouseover = function () {
      clearInterval(timer)
    }
    oContainer.onmouseout = function () {
      timer = setInterval(function () {
        oNext.onclick()
      }, 2000);
    }



  </script>
</body>

</html>